<template>
  <div>
    <!-- 二级路由坑 -->
    <router-view v-if="$route.path=='/home/search'"></router-view>
    <div v-else>
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round"  @click="$router.push('/home/search')" />
    <!-- 轮播图 -->
    <Swipe :bannerArr="bannerArr"></Swipe>
    <!-- 导航组件 -->
    <Grid :channelArr="channelArr"></Grid>
    <!-- 品牌制造商 -->
    <Brand :brandList="brandList"></Brand>
    <!-- 新品推荐 -->
    <NewProduct :newGoodsList="newGoodsList"></NewProduct>
    <!-- 人气推荐 -->
    <Top :hotGoodsList='hotGoodsList'></Top>
    <!-- 专题精选 -->
    <TopicHot :topicList='topicList'></TopicHot>
    <!-- 懒加载 -->
    <HomeLazy :categoryList="categoryList"></HomeLazy>
  </div>
  </div>
</template>

<script>
//引入轮播图
import  Swipe from '@/components/Swipe'
//引入grid列表
import Grid from '@/components/Grid'
//品牌制造商
import Brand from '@/components/Brand'
//新品制造商
import NewProduct from '@/components/NewProduct'
//人气推荐
import Top from '@/components/Top'

import HomeLazy from '@/components/HomeLazy'
//专题精选
import TopicHot from '@/components/TopicHot'
//导入接口请求数据
import {getIndexData} from '@/utils/http'
// console.log(getIndexData);

export default {
  name: "Home",
  props: [""],
  data() {
    return {
        value:'',//搜索框
        bannerArr:[],//轮播图数据
        channelArr:[],//导航数组
        brandList:[],//品牌数据
        newGoodsList:[],//新品手法
        hotGoodsList:[],//热门推荐
        topicList:[],//专题精选
        categoryList:[],
        goodsList:[]

    };
  },

  components: {
    Swipe,
    Grid,
    Brand,
    NewProduct,
    Top,
    TopicHot,
    HomeLazy
  },

  computed: {},

  created() {
    getIndexData().then(res=>{
        this.bannerArr=res.data.banner
        // console.log(this.bannerArr);
        this.channelArr=res.data.channel
        // console.log( this.channelArr);
        this.brandList=res.data.brandList
        // console.log(res);
        this.newGoodsList=res.data.newGoodsList
        this.hotGoodsList=res.data.hotGoodsList
        this.topicList=res.data.topicList
         this.categoryList=res.data.categoryList
        //  this.goodsList=res.data.categoryList.goodsList
        //  console.log(this.categoryList);
    })
  },

  mounted() {},

  methods: {},
};
</script>
<style scoped>
</style>